.msgboard {
    width: 100%;
    height: 100%;

    .head {
        width: 100%;
        min-width: 200px;
        height: 124px;
        padding: 20px;
        border-top: 1px solid rgb(231, 231, 231);
        background: var(--bgc);
        color: var(--fc);

        div {
            font-size: 18px;
            text-align: center;
            flex-direction: column;

            h2 {
                color: var(--fc);
            }

            p {
                font-size: 16px;
            }
        }
    }
    
    .shade{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        padding-top: 100px;

        >div{
            padding:20px;
            background: #fff;
            margin: 0 auto;
            width: 500px;
            font-size: 16px;
            >p{
                display: flex;
                justify-content: space-between;
                align-items: center;
                >span:nth-child(2){
                    cursor: pointer;
                }
            }
        }
    }

    main {
        display: block;
        padding: 1rem 0;

        .container_up {
            display: block;
            max-width: 800px;
            padding: 0 16px;
            margin: 0 auto;
            margin-bottom: 35px;
            
            .review {
                color: var(--fc);
                font-size: 16px;
                font-weight: 500px;
                margin-bottom: 30px;
                text-align: center;
            }

            .up_content {

                .up_content_text {
                    padding: 16px;
                    background: var(--bgc);

                    .up_content_text_filed {

                        .filed {
                            .ant_input {
                                color: var(--fc);
                                width: 100%;
                                height: 100%; 
                                min-height: 142px; 
                                max-height: 274px; 
                                overflow-y: hidden; 
                                resize: none;
                                border-color: var(--bc);
                                background: var(--bgc);
                                outline: none;

                                &::placeholder {
                                    color: var(--fc);
                                }
                            }
                        }

                        .filed_release {
                            padding-top: 10px;
                            display: flex;
                            justify-content: space-between;

                            .popover {
                                color: var(--fc);
                                cursor: pointer;

                                &:hover {
                                    color: #ff0000;
                                    cursor: pointer;
                                }
                            }

                            .release {
                                width: 64px;
                                height: 32px;
                                color: var(--fc);
                                background: var(--bc);
                                border: 1px solid #ccc;
                                border-radius: 3px;
                                font-size: 14px;
                            }
                        }
                    }
                }

                .comment {
                    padding: 16px;
                    margin-top: 1rem;
                    background: var(--bgc);
                    color: var(--fc);

                    .comment_header {
                        display: flex;
                        align-items: center;

                        span {
                            &:nth-child(1) {
                                width: 32px;
                                height: 32px;
                                line-height: 32px;
                                text-align: center;
                                color: #ffffff;
                                font-size: 18px;
                                background: #ff0000;
                                border-radius: 50%;
                            }

                            &:nth-child(2) {
                                padding: 0 8px;
                                font-weight: bold;
                            }
                        }
                    }

                    .comment_main {
                        padding: 12px 0 12px 40px;

                        div {
                            .content {
                                margin: 0;
                            }
                        }
                    }

                    .comment_footer {
                        padding-left: 40px;

                        .comment_footer_time {
                            span {
                                &:nth-child(3) {
                                    display: inline-block;
                                    margin-left: 8px;
                                }
                            }
                        }

                        .comment_footer_describe {
                            .describe_header {
                                display: flex;
                                align-items: center;
        
                                span {
                                    &:nth-child(1) {
                                        width: 32px;
                                        height: 32px;
                                        line-height: 32px;
                                        text-align: center;
                                        color: #ffffff;
                                        font-size: 18px;
                                        background: #00ff37;
                                        border-radius: 50%;
                                    }
        
                                    &:nth-child(2) {
                                        padding: 0 0 0 8px;
                                        font-weight: bold;
                                    }

                                    &:nth-child(3) {
                                        padding: 0 8px;
                                    }

                                    &:nth-child(4) {
                                        font-weight: bold;
                                    }
                                }
                            }

                            .describe_main {
                                padding: 12px 0 12px 40px;
        
                                div {
                                    .content {
                                        margin: 0;
                                    }
                                }
                            }

                            .describe_footer {
                                .describe_footer_time {
                                    span {
                                        &:nth-child(3) {
                                            display: inline-block;
                                            margin-left: 8px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .container_down {
            display: block;
            max-width: 800px;
            padding: 0 16px;
            margin: 0 auto;
            
            .recommend {
                color: var(--fc);
                font-size: 16px;
                font-weight: 500px;
                margin-bottom: 30px;
                text-align: center;
            }

            .down_content {

                .recomment {
                    padding: 16px;
                    font-size: 16px;
                    color: var(--fc);
                    background: var(--bgc);
                    border-bottom: 1px solid rgb(231, 231, 231);

                    .recomment_header {
                        display: flex;
                        align-items: center;

                        .title {
                            color: var(--fc);
                            font-weight: bold;
                            line-height: 22px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .news_reading {
                            color: #8590a6;
                            display: flex;
                            align-items: center;

                            div {
                                font-size: 12px;
                                padding: 0 8px;
                            }
                        }
                    }
                    
                    &:hover {
                        .title {
                            color: #FF0064;
                        }
                    }

                    .recomment_main {
                        display: flex;
                        flex-wrap: nowrap;
                        margin-top: 12px;

                        .recomment_main_left {
                            width: 190px;
                            max-height: 100px;
                            min-height: 100px;
                            flex: 0 0 auto;
                            margin-right: 1rem;
                            overflow: hidden;

                            p {
                                width: 0;
                                height: 0;
                            }

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit:cover;
                            }
                        }
                            
                        .recomment_main_right {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;

                            .recomment_main_right_up {
                                color: var(--fc);
                                font-size: 14px;
                                max-width: 100%;
                                overflow: hidden;
                                display: -webkit-box;
                                text-overflow: ellipsis;
                                -webkit-line-clamp: 3;
                                -webkit-box-orient: vertical;
                            }
                            .recomment_main_right_down {
                                width: 100%;
                                color: #8590a6;
                                font-size: 14px;
                                line-height: 20px;
                                margin-top: 0.8rem;

                                .span {
                                    margin: 0 8px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.emojis{
    display: flex;
    flex-wrap: wrap;
    max-width: 480px;
    height: 240px;
    overflow: auto;
    cursor: auto;

    li{
        width: 32px;
    height: 32px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    }
}